<!--
  模块：问卷调查 - 新增
-->
<template>
  <!-- @get-question-type="getQuestionType" -->
  <div class="question-edit" @click.self.stop="blurQuestion">
    <!-- 添加页面的头部 -->
    <div class="question-add-header" @click.stop="blurQuestion">
      <el-button
        class="question-add-header-button question-add-header-button-save"
        @click="saveQuestion('ruleForm')"
      >
        保存
      </el-button>
      <el-button
        class="question-add-header-button question-add-header-button-submit"
        @click="addSubmitQuestion('ruleForm')"
      >
        发布
      </el-button>
    </div>

    <!-- 添加页面的主部分 -->
    <div class="question-add-body">
      <!-- 问卷信息 -->

      <div class="question-add-body-info">
        <el-card style="height: 100%; overflow: auto">
          <CardFormTitle title="问卷信息" />

          <div
            class="question-add-body-info-header-body"
            @click.stop="blurQuestion"
          >
            <el-form
              :model="ruleForm"
              ref="ruleForm"
              class="demo-ruleForm"
              label-width="100%"
              :inline="true"
              :rules="rules"
            >
              <el-form-item prop="title">
                <div class="question-add-body-info-header-body-div title">
                  <div class="question-add-body-info-header-body-title">
                    问卷标题
                  </div>
                  <div class="question-add-body-info-header-body-titleInput">
                    <el-input
                      type="text"
                      class="titleinput"
                      v-model.trim="ruleForm.title"
                    />
                    <span style="color: red">*</span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item prop="time">
                <div class="question-add-body-info-header-body-div startDate">
                  <div class="question-add-body-info-header-body-title">
                    开启时间 - 截止时间
                  </div>

                  <div class="question-add-body-info-header-body-startDate">
                    <el-date-picker
                      v-model="ruleForm.time"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="截止时间"
                      class="date"
                    ></el-date-picker>

                    <span style="color: red">*</span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <div class="question-add-body-info-header-body-div author">
                  <div class="question-add-body-info-header-body-title">
                    发布人
                  </div>
                  <div class="question-add-body-info-header-body-author">
                    <el-input
                      v-model.trim="releaseUser"
                      class="author"
                      :disabled="true"
                    ></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <header class="releaseDate">
                  <div>发布日期</div>
                  <el-date-picker
                    v-model="releaseDate"
                    type="date"
                    class="releaseDate_date"
                    :disabled="true"
                  ></el-date-picker>
                </header>
              </el-form-item>
            </el-form>
          </div>

          <CardFormTitle title="问卷内容" />

          <header
            class="question-add-body-info-header-body contentHeader"
            @click.self.stop="blurQuestion"
          >
            <div class="question-add-body-content" @click="addQuestion">
              <i class="el-icon-plus"></i>
            </div>
          </header>
        </el-card>
        <!---->
      </div>

      <!-- 题目设置 -->
      <div class="question-add-body-title" @click.self.stop="blurQuestion">
        <el-card>
          <CardFormTitle title="题目设置" />
        </el-card>
        <el-table :data="isNumber" style="width: 100%" :show-header="false">
          <el-table-column prop="previous"></el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isNum"
                active-color="#3B51B9"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
                class="switch"
                @change="isShowNum"
              ></el-switch>
            </template>
          </el-table-column>
        </el-table>

        <el-table :data="isRequire" style="width: 100%" :show-header="false">
          <el-table-column prop="previous"></el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isReq"
                active-color="#3B51B9"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
                class="switch"
                @change="isRequireAnswer"
              ></el-switch>
            </template>
          </el-table-column>
        </el-table>

        <el-table :data="type" style="width: 100%" :show-header="false">
          <el-table-column prop="title" width="50"></el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-radio-group
                v-model="scope.row.topic"
                size="mini"
                @change="selectQuestionType"
              >
                <el-radio-button :label="1">单选</el-radio-button>
                <el-radio-button :label="2">多选</el-radio-button>
                <el-radio-button :label="3">问答</el-radio-button>
              </el-radio-group>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>


<script>
import {
  addRadio,
  addCheckbox,
  addAnswer,
  drawCheckbox,
  drawAnswer,
  drawRadio,
} from '@/views/question/add/methods/index.js'
import $ from 'jquery'
import Vue from 'vue'
//引入 coment 组件
import moment from 'moment'

//引入的方法
import { editCheckbox } from '@/views/question/edit/methods/drawCheckbox.js'
import { editAnswer } from '@/views/question/edit/methods/drawAnswer.js'
import { editRadio } from '@/views/question/edit/methods/drawRadio.js'
import { saveOrSubmitQuestion } from '@/views/question/edit/methods/saveOrSubmitQuestion.js'

//引入的请求
import { updateQuestion, fetchQuestion } from '@/api/question/index.js'

export default {
  inject: ['reload'],
  name: 'QuestionEdit',
  beforeMount() {
    console.log(this.$route.query)
    fetchQuestion(this.$route.query.id).then((res) => {
      console.log(res, 'jjj')
      this.ruleForm.title = res.data.title
      this.ruleForm.time = [res.data.startTime, res.data.endTime]
      this.releaseUser = res.data.publishUserName
      this.releaseDate = res.data.publishTime

      this.isNumber[0].isNum = res.data.questions[0].displayNumber

      // //* 循环判断是什么类型的问卷
      res.data.questions.forEach((info, index) => {
        if (info.queType === 1) {
          this.radio.questions.splice(this.radio.questions.length, 0, info)
          this.radio.num.splice(this.radio.num.length, 0, index + 1)
        } else if (info.queType === 2) {
          this.checkbox.questions.splice(
            this.checkbox.questions.length,
            0,
            info
          )
          this.checkbox.num.splice(this.checkbox.num.length, 0, index + 1)
        } else {
          this.answer.questions.splice(this.answer.questions.length, 0, info)
          this.answer.num.splice(this.answer.num.length, 0, index + 1)
        }
      })

      this.drawQuestion()
    })
  },
  mounted() {
    this.releaseUser = $('.user-info').text()
  },
  data() {
    return {
      //是否显示序号
      isNumber: [
        {
          previous: '显示序号',
          isNum: 1,
        },
      ],
      //是否为必答题
      isRequire: [
        {
          previous: '必答题',
          isReq: 0,
        },
      ],
      //问卷为什么题型
      type: [
        {
          title: '题型',
          topic: 1,
        },
      ],

      ruleForm: {
        //问卷标题
        title: null,
        //开启 至 截止 时间
        time: '',
      },
      rules: {
        title: [
          { required: true, message: '请输入问卷标题', trigger: 'blur' },
          {
            min: 3,
            max: 100,
            message: '长度在 3 到 100 个字符',
            trigger: 'blur',
          },
        ],
        time: [
          {
            required: true,
            message: '请设置开启和截止日期',
            trigger: 'blur',
          },
        ],
      },

      //发布人
      releaseUser: '', //user-info
      //发布日期
      releaseDate: moment(new Date()).format('YYYY-MM-DD'),

      count: 0,
      //用来接收问卷的序号
      questionNumber: 0,

      //! 保存问卷 vue 组件的数组
      profileArray: [],

      //单选问卷题目对象
      radio: {
        id: '',
        questions: [],
        num: [], //问卷序号
      },
      //多选问卷题目对象
      checkbox: {
        id: '',
        questions: [],
        num: [], //问卷序号
      },
      //问答题目对象
      answer: {
        id: '',
        questions: [],
        num: [], //问卷序号
      },
    }
  },
  props: {
    id: {
      type: String,
    },
  },
  methods: {
    //! 渲染问卷reIndex
    drawQuestion() {
      let num = $('.addQuestion').length + 1
      //把本vue对象传递给下面的vue
      let vueObj = this

      //判断是否显示序号
      let isShowNum = this.isNumber[0].isNum

      //添加问卷之前判断添加的问卷的类型
      let type = this.type[0].topic

      //? 把生成的 vue 组件添加到 this.profileArray 数组中

      if (this.radio.questions.length !== 0) {
        for (let i = 0; i < this.radio.questions.length; i++) {
          if (this.radio.questions[i].displayNumber === 0) {
            this.profileArray.splice(
              this.profileArray.length,
              0,
              editRadio(
                this.radio.num[i],
                vueObj,
                'display:none',
                this.radio.questions[i]
              )
            )
          } else {
            this.profileArray.splice(
              this.profileArray.length,
              0,
              editRadio(
                this.radio.num[i],
                vueObj,
                'display:block',
                this.radio.questions[i]
              )
            )
          }
        }
      }

      if (this.checkbox.questions.length !== 0) {
        for (let i = 0; i < this.checkbox.questions.length; i++) {
          if (this.checkbox.questions[i].displayNumber === 0) {
            this.profileArray.splice(
              this.profileArray.length,
              0,
              editCheckbox(
                this.checkbox.num[i],
                vueObj,
                'display:none',
                this.checkbox.questions[i]
              )
            )
          } else {
            this.profileArray.splice(
              this.profileArray.length,
              0,
              editCheckbox(
                this.checkbox.num[i],
                vueObj,
                'display:block',
                this.checkbox.questions[i]
              )
            )
          }
        }
      }

      if (this.answer.questions.length !== 0) {
        for (let i = 0; i < this.answer.questions.length; i++) {
          if (this.answer.questions[i].displayNumber === 0) {
            this.profileArray.splice(
              this.profileArray.length,
              0,
              editAnswer(
                this.answer.num[i],
                vueObj,
                'display:none',
                this.answer.questions[i]
              )
            )
          } else {
            this.profileArray.splice(
              this.profileArray.length,
              0,
              editAnswer(
                this.answer.num[i],
                vueObj,
                'display:block',
                this.answer.questions[i]
              )
            )
          }
        }
      }
    },

    //! 失去选中问卷的方法
    blurQuestion() {
      for (let i = 0; i < $('.addQuestion').length; i++) {
        $('.addQuestion').eq(i).css('border', '2px solid lightgrey')
        this.questionNumber = 0
      }
    },

    //! 发布问卷
    addSubmitQuestion(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let { toBackStage, isHaveNull } = saveOrSubmitQuestion(this)
          toBackStage.status = 2
          toBackStage.id = this.$route.query.id

          this.$confirm('是否确认发布问卷', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              if (isHaveNull) {
                //* 发送请求
                updateQuestion(toBackStage).then((res) => {
                  console.log(res)
                  if (res.success === true) {
                    this.$message('修改成功')
                    this.$router.push({
                      path: '/question/index',
                      query: {
                        msg: 'success',
                      },
                    })
                  }
                })
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除',
              })
            })
        } else {
          return false
        }
      })
    },

    //! 保存问卷
    saveQuestion(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let { toBackStage, isHaveNull } = saveOrSubmitQuestion(this)
          toBackStage.status = 1
          toBackStage.id = this.$route.query.id

          this.$confirm('是否确认保存问卷', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              if (isHaveNull) {
                //* 发送请求
                updateQuestion(toBackStage).then((res) => {
                  console.log(res)
                  if (res.success === true) {
                    this.$message('保存成功')

                    this.$router.push({
                      path: '/question/index',
                      query: {
                        msg: 'success',
                      },
                    })
                  }
                })
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除',
              })
            })
        } else {
          return false
        }
      })
    },

    //! 是否为必答题
    isRequireAnswer(val) {
      console.log(val, 'isRequireAnswer')
      if (val === 0) {
        $(`.addQuestion${this.questionNumber} .isRequireAnswer`).css(
          'display',
          'none'
        )
        $(`.addQuestion${this.questionNumber} .title`).css(
          'margin-left',
          '19.5px'
        )
        this.profileArray[
          this.questionNumber - 1
        ].$refs.reIndex.questionData.requiredQue = 0
      } else if (val === 1) {
        $(`.addQuestion${this.questionNumber} .isRequireAnswer`).css(
          'display',
          'inline'
        )
        $(`.addQuestion${this.questionNumber} .title`).css('margin-left', '0px')
        this.profileArray[
          this.questionNumber - 1
        ].$refs.reIndex.questionData.requiredQue = 1
      }
    },

    //! 是否显示序号
    isShowNum(val) {
      console.log(val, 'isShowNum')
      if (val === 0) {
        for (let i = 0; i < $('.addQuestion').length; i++) {
          $('.addQuestion .question').eq(i).css('display', 'none')
        }
      } else {
        for (let i = 0; i < $('.addQuestion').length; i++) {
          $('.addQuestion .question').eq(i).css('display', 'block')
        }
      }
    },

    //! 点击切换题型
    selectQuestionType(val) {
      console.log(val, 'checkbox')
      //传给子组件的值
      let vueObj = this
      console.log(this.questionNumber, 'questionNumber')
      if (val === 2) {
        //判断是否显示序号
        if (this.isNumber[0].isNum === 1) {
          //? 先删除原来位置的 vue 组件
          this.profileArray.splice(this.questionNumber - 1, 1)
          //? 再把生成的 vue 组件添加到 this.profileArray 数组中
          this.profileArray.splice(
            this.questionNumber - 1,
            0,
            drawCheckbox(this.questionNumber, vueObj, 'display:block')
          )
        } else {
          //? 先删除原来位置的 vue 组件
          this.profileArray.splice(this.questionNumber - 1, 1)
          //? 把生成的 vue 组件添加到 this.profileArray 数组中
          this.profileArray.splice(
            this.questionNumber - 1,
            0,
            drawCheckbox(this.questionNumber, vueObj, 'display:none')
          )
        }
      } else if (val === 3) {
        //判断是否显示序号
        if (this.isNumber[0].isNum === 1) {
          //? 先删除原来位置的 vue 组件
          this.profileArray.splice(this.questionNumber - 1, 1)
          //? 把生成的 vue 组件添加到 this.profileArray 数组中
          this.profileArray.splice(
            this.questionNumber - 1,
            0,
            drawAnswer(this.questionNumber, vueObj, 'display:block')
          )
        } else {
          //? 先删除原来位置的 vue 组件
          this.profileArray.splice(this.questionNumber - 1, 1)
          //? 把生成的 vue 组件添加到 this.profileArray 数组中
          this.profileArray.splice(
            this.questionNumber - 1,
            0,
            drawAnswer(this.questionNumber, vueObj, 'display:none')
          )
        }
      } else if (val === 1) {
        console.log(this.questionNumber, 'radio')
        //判断是否显示序号
        if (this.isNumber[0].isNum === 1) {
          //? 先删除原来位置的 vue 组件
          this.profileArray.splice(this.questionNumber - 1, 1)
          //? 把生成的 vue 组件添加到 this.profileArray 数组中
          this.profileArray.splice(
            this.questionNumber - 1,
            0,
            drawRadio(this.questionNumber, vueObj, 'display:block')
          )
        } else {
          //? 先删除原来位置的 vue 组件
          this.profileArray.splice(this.questionNumber - 1, 1)
          this.profileArray.splice(
            this.questionNumber - 1,
            0,
            drawRadio(this.questionNumber, vueObj, 'display:none')
          )
        }
      }
      console.log(this.profileArray) //num
    },

    //! 添加问卷
    addQuestion() {
      for (let i = 0; i < $('.addQuestion').length; i++) {
        $('.addQuestion').eq(i).css('border', '2px solid lightgrey')
        this.questionNumber = 0
      }
      let num = $('.addQuestion').length + 1
      //把本vue对象传递给下面的vue
      let vueObj = this
      //判断是否显示序号
      let isShowNum = this.isNumber[0].isNum
      console.log(isShowNum)
      //添加问卷之前判断添加的问卷的类型
      let type = this.type[0].topic
      //? 把生成的 vue 组件添加到 this.profileArray 数组中
      if (isShowNum === 1) {
        if (type === 1) {
          this.profileArray.splice(
            this.profileArray.length,
            0,
            addRadio(num, vueObj, 'display:block')
          )
        } else if (type === 2) {
          this.profileArray.splice(
            this.profileArray.length,
            0,
            addCheckbox(num, vueObj, 'display:block')
          )
        } else {
          this.profileArray.splice(
            this.profileArray.length,
            0,
            addAnswer(num, vueObj, 'display:block')
          )
        }
      } else {
        this.profileArray.slice(
          this.profileArray.length,
          0,
          addRadio(num, vueObj, 'display:none')
        )
      }
      console.log(this.profileArray)
      //添加完之后判断是否为必答题
      if (this.isRequire[0].isReq === 1) {
        $(`.addQuestion${num} .isRequireAnswer`).css('display', 'inline')
        $(`.addQuestion${num} .title`).css('margin-left', '0px')
      } else {
        $(`.addQuestion${num} .isRequireAnswer`).css('display', 'none')
        $(`.addQuestion${num} .title`).css('margin-left', '19.5px')
      }
    },
  },
}
</script>

<style scoped>
.question-edit {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 100%;
  overflow: auto;
}

/* 添加页面的头部 */
.question-add-header {
  width: 100%;
  height: 46px;
  background-color: white;
  position: relative;
  line-height: 46px;
  margin: 0px;
  border: 1px solid lightgrey;
}
.question-add-header-button {
  width: 90px;
  background-color: rgb(59, 81, 185);
  color: white;
  position: absolute;
  top: 5px;
}
.question-add-header-button-submit {
  right: 20px;
}
.question-add-header-button-save {
  right: 130px;
}

/* 添加页面的主体 */
.question-add-body {
  width: 96%;
  height: 90%;
  background-color: #e2e8f1;
  margin: auto;
  margin-top: 20px;
  /* border: 1px solid; */
  display: flex;
  position: relative;
}
.question-add-body-info,
.question-add-body-title {
  display: inline-block;
  overflow-x: hidden;
  overflow-y: auto;
}
.question-add-body-info {
  width: 78%;
  background-color: white;
  margin-right: 14px;
}
.question-add-body-title {
  width: 21%;
  background-color: white;
  /* position: relative;
  right: -5%;
  top: -1%; */
  /* float: right; */
  display: inline-block;
}
.question-add-body-info-header {
  display: flex;
  width: 100%;
  height: 30px;
  margin-top: 30px;
  /* border: 1px solid; */
  line-height: 30px;
}
.question-add-body-info-header header {
  display: inline-block;
  width: 5px;
  height: 100%;
  background-color: lightblue;
  margin-right: 10px;
}
.question-add-body-info-header div {
  display: inline-block;
  width: 90%;
  height: 100%;
  margin-left: 10px;
  /* border: 1px solid; */
  line-height: 30px;
  font-size: 21px;
}
.question-add-body-info-header-body {
  width: 100%;
  margin-top: 20px;
  margin-left: 35px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.question-add-body-info-header-body-div {
  width: 210px;
  height: 78px;
  /* border: 1px solid; */
  /* display: inline-block; */
  /* line-height: 100px; */
}
.question-add-body-info-header-body-div span {
  margin-left: 1px;
}
.question-add-body-info-header-body .title {
  width: 330px;
  /* margin-right: 20px; */
}
.question-add-body-info-header-body .startDate {
  width: 510px;
}
.question-add-body-info-header-body .startDate,
.question-add-body-info-header-body .endDate,
.question-add-body-info-header-body .author {
  margin-right: 20px;
}
.question-add-body-info-header-body .startDate {
  width: 410px;
}
.question-add-body-info-header-body-titleInput {
  width: 310px;
  margin: 0px;
}
.question-add-body-info-header-body-title {
  font-size: 18px;
  margin-bottom: 8px;
}
.date {
  width: 380px;
}
.question-add-body-info-header-body-author {
  width: 200px;
}
.titleinput {
  border: 1px solid lightgrey;
  border-radius: 5px;
  width: 300px;
  height: 35.99px;
  outline: none;
}
.titleinput:focus {
  border: 1px solid #3b51b9;
}
.info {
  margin-left: 30px;
}
.releaseDate div {
  font-size: 18px;
  margin-bottom: 5px;
}
.releaseDate_date {
  width: 200px;
  /* background: blue; */
}

.question-add-body-content {
  width: 440px;
  height: 297px;
  border: 3px dashed lightgrey;
  border-radius: 5px;
  display: inline-block;
  line-height: 280px;
  text-align: center;
  /* margin-right: 200px; */
  cursor: pointer;
}
.question-add-body-content .el-icon-plus {
  font-size: 30px;
  font-weight: bold;
  color: grey;
}
.contentHeader {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>

<style>
.question-add-body .el-icon-date {
  position: relative;
  left: 170px;
}
.question-add-body .el-input__prefix {
  width: 0;
  height: 0;
}
.question-add-body .el-input__suffix {
  display: none;
}
.question-add-body .el-icon-time:before {
  content: '\e78e';
  /* position: relative;
  left: 170px; */
  font-size: 17.5px;
}

/* "\e78e" */
</style>

